<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath }/layui/layui_2/layui/css/layui.css" media="all"/>
</head>
<body>

<!-- 添加员工 -->
<div id="add_emp_div">
    <div>
        <form id="formEmpAdd" class="layui-form" action="" method="post" lay-filter="add_emp_form">
        	<br/>
            <div style="width: 400px;height:500px;float: left">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">真实姓名:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="e_truename" lay-verify="required" placeholder="请输入真实姓名"
                                   autocomplete="off" class="layui-input" style="width: 260px">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">登录名称:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="e_loginname" lay-verify="required" placeholder="请输入登录名称"
                                   autocomplete="off" class="layui-input" style="width: 260px">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">登录密码:</label>
                        <div class="layui-input-inline">
                            <input type="password" name="e_psw" lay-verify="required" placeholder="请输入登录密码"
                                   autocomplete="off" class="layui-input" style="width: 260px">
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">所在部门:</label>
                    <div class="layui-input-inline">
                        <select name="dept.p_id" id="deptSelect" lay-filter="dept_select">
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">员工性别:</label>
                    <div class="layui-input-block">
                        <input type="radio" name="e_sex" value="1" title="男" checked="">
                        <input type="radio" name="e_sex" value="0" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">员工头像:</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="upload_btn">上传图片</button>
                        <input type="text" name="e_img" style="width: 180px;height: 38px">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">员工备注:</label>
                    <div class="layui-input-block">
                        <textarea name="e_remark" value="" required placeholder="请输入内容" class="layui-textarea" style="width: 300px"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">员工级别:</label>
                    <div class="layui-input-inline">
                        <select name="e_flag" lay-filter="aihao">
                            <option value="0" selected="">普工</option>
                            <option value="1">部门经理</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">权限级别:</label>
                    <div class="layui-input-inline">
                        <select name="e_admin" lay-filter="aihao">
                            <option value="0" selected="">普通操作者</option>
                            <option value="1">部门经理</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" id="save_btu">新增员工</button>
                    </div>
                </div>
            </div>

            <!--右边上传图片预览-->
            <div style="width:auto; float: left">
                <img src="${pageContext.request.contextPath}/images/face.jpg" style="width: 150px;height: 150px"
                     class="layui-upload-img layui-circle" id="upload_img"/>
                <p id="upload_imgText"></p>
            </div>


        </form>
    </div>
</div>
<script src="${pageContext.request.contextPath }/layui/layui_2/layui/layui.js"></script>
<script>
    layui.use(['element', 'table', 'jquery', 'layer', 'form', 'upload'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload;
		
        //动态添加部门选项
        $.post('${pageContext.request.contextPath}/deptAction_getByName',{},function(data){
        	for(var i = 0;i< data.length;i++){
        		var id = data[i].p_id;
        		var name = data[i].p_name;
        		$('#deptSelect').append("<option value="+id+">"+name+"</option>");
        	}
        	form.render();
        })
        
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#upload_btn'
            , url: '${pageContext.request.contextPath}/uploadAction_imgUpload'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#upload_img').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }else{
                	layer.msg("上传成功");
                }
                $("input[name=e_img]").val(res.data[0].src);
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#upload_imgText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }

        });

        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

        //监听提交
        form.on('submit(add_emp_form)', function (data) {
        	$.post("${pageContext.request.contextPath}/empAction_add.action",
                    $("#formEmpAdd").serialize(),
                    function (data) {
                        parent.location.href = '${pageContext.request.contextPath}/page_emp_emp.action';
                        parent.layer.close(index);
            });
            return false;
        });
		
    });

</script>

</body>
</html>
